<template>
  <view>
    <u-cell title="手机号码"/>
    <view
      class="u-demo-block__content"
      style="margin-top: 15px;"
    >
      <u-input placeholder="请输入您的手机号" border="bottom">
        <template #suffix>
          <u-code
            ref="uCode"
            seconds="20"
            change-text="X秒重新获取"
            @change="codeChange"
          />
          <u-button
            :text="tips"
            type="success"
            size="mini"
            @tap="getCode"
          />
        </template>
      </u-input>
    </view>
    <view style="margin: 50px 20px;">
      <u-button type="primary" shape="circle" size="large" @click="next">下一步</u-button>
    </view>
  </view>

</template>

<script>

export default {
  name: 'UpdatePassword',
  data() {
    return {
      content: undefined,
      tips: '调教',
      value: ''
    }
  },
  methods: {
    next() {
      uni.navigateTo({
        url: '/pages/updatePassword/sendVerification'
      })
    },
    codeChange(text) {
      this.tips = text
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading()
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送')
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start()
        }, 2000)
      } else {
        uni.$u.toast('倒计时结束后再发送')
      }
    },
    change(e) {
      console.log('change', e)
    }
  }

}
</script>

<style scoped>

</style>
